<template>
  <div class="container">
        <el-form inline size="small" @submit.native.prevent>
          <el-form-item label="关键字">
            <el-input v-model="listPram.queryKeyWords" placeholder="请输入名称，描述" clearable class="selWidth" size="small">
            </el-input>
          </el-form-item>
          <el-form-item >
            <el-button
              :disabled="sosobtn"
              icon="el-icon-search"
              type="primary"
              @click="initList"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" type="primary" @click="reset"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      <el-button size="mini" type="primary" @click="handlerEditData()" v-if="rolesId===1">创建表单</el-button>
      <el-table
    :data="tableData"
    v-loading="loading"
    style="width: 100%">
    <el-table-column
            align="center"
            label="id"
            prop="id"
            width="80"
          ></el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="info"
      align="center"
      label="描述">
    </el-table-column>
    <el-table-column
      prop="updateTime"
      align="center"
      label="更新时间">
    </el-table-column>
    <el-table-column
      prop="address"
      align="center"
      width="180"
      label="操作">
      <template slot-scope="scope">
        <el-button size="mini" type="text" @click="handleEdit(scope.row)" v-if="rolesId===1">编辑</el-button>
          <!-- <el-button @click="handleDelete(scope.row.id)" size="mini" slot="reference" type="danger" style="margin-left: 20px;">删除</el-button> -->
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="sizechange"
          :page-size="listPram.size"
          :current-page.sync="listPram.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>

      <el-dialog
          :visible.sync="editConfigVisible"
          fullscreen
          title="创建表单"
          destroy-on-close
          :close-on-click-modal="false"
          @open="editConfigClose"
        >
          <edit
            v-if="editConfigVisible"
             :edit-data="editDialogConfig.editData"
          :is-create="editDialogConfig.isCreate"
            @hideDialog="handlerHide"
            ref="formConfig"
          />
      </el-dialog>
  </div>

      <!--  -->
 
</template>
<script>
import edit from '@/components/common/formConfig/edit'
import { formConfigList , formConfigDelete } from '@/api/api'
export default {
components:{edit},
  data(){
      return{
          listPram:{
              queryKeyWords:'',
              size:10,
              page:1
          },
          total:0,
          editConfigVisible:false,
          tableData:[],
          editDialogConfig:{},
          loading:true,
          rolesId:0
      }
    
  },
  mounted(){
    const userInfo = sessionStorage.getItem('userInfo')
     this.rolesId = JSON.parse(userInfo).rolesId
    this.initList()
  },
  methods:{
    editConfigClose(){
        this.$nextTick(()=>{
          this.$refs.formConfig.restData()
        })
      },
     async initList(){
         this.loading = true
        const res = await formConfigList(this.listPram)
        if(res.code == 200){
          this.loading = false
          this.tableData = res.data
          this.total = res.pageInfo.recordCount
        }
     },
     handleCurrentChange(val) {
          this.listPram.page = val;
          this.initList()
      },
      sizechange(val) {
          this.listPram.size = val;
          this.initList()
      },
      reset(){
           this.listPram = {
              size:10,
              page:1
           }
           this.initList()
      },
     handlerHide() {
        this.editConfigVisible = false
        this.initList()
    },
     handlerEditData(){
      this.editDialogConfig.editData = ''
        this.editConfigVisible = true
        this.editDialogConfig.isCreate = 0
     },
     async handleDelete(id){
      const then =  await this.$confirm(`是否确定删除该模板？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    })
    if(then == 'confirm'){
      const res = await formConfigDelete(id)
        if(res.code == 200){
          this.initList()
        }
    }
     },
     handleEdit(row){ //表单编辑
      console.log(row)
      this.editDialogConfig.editData = row
      this.editDialogConfig.isCreate = 1
      this.editConfigVisible = true
     },
  }
}
</script>
<style scoped lang="less">
.container{
width: calc(100% - 60px);
height: calc(100% - 60px);
overflow: hidden;
overflow-y: auto;
}
</style>